<template>
  <div class="prouduct-container">
      
    <div class="conta">
        <div class="header">
      <ul>
        <li><router-link to="/product/pdControl">商品管理</router-link></li>
        <li><router-link to="/product">商品分类</router-link></li>
        <div class="user-info">
          <!-- <img src="../assets/account.png" alt=""> -->
          <!-- <span>美业</span> -->
          <!-- <span class="mui-icon mui-icon-arrowdown"></span> -->
          </div>
      </ul>
    </div>
        <div class="categroy-admin">
            <div>商品类别</div>
            <span class="mui-btn mui-btn-primary"  @click="createCategroyShow()">创建商品分类</span>
        </div>
        <div class="addCategroy" v-show="isShow">
           分类名称 <input type="text" v-model="categroyName"> <br>
           排序<input type="text" v-model="pid"> <br>
           <input type="button" value="保存" @click="createCategroy()"> <input type="button" @click="cancel()" value="取消">
        </div>
        <!-- <div class="addCategroy" v-show="isShowUpdata">
           分类名称 <input type="text" v-model="categroyNameUpdata"> <br>
           排序<input type="text" v-model="pidUpdata"> <br>
           <input type="button" value="保存" @click="createCategroy1()"> <input type="button" @click="cancel1()" value="取消">
        </div> -->
        <table width="80%">
            <tr>
                <td class="mui-col-xs-2">分类名称</td>
                <td class="mui-col-xs-8">排序</td>
                <td class="mui-col-xs-2">操作</td>
            </tr>
            <tr v-for="(item,index) in data">
                <td>{{data[index].name}}</td>
                <td class="mui-btn mui-btn-primary">{{data[index].id}}</td>
                <td><input type="button"value="编辑" @click="createCategroyShow1(data[index].id)"><input type="button" value="删除"></td>
                <div class="addCategroy" v-show="isShowUpdata">
           分类名称 <input type="text" v-model="categroyNameUpdata"> <br>
           排序<input type="text" v-model="pidUpdata"> <br>
           <input type="button" value="保存" @click="createCategroy1()"> <input type="button" @click="cancel1()" value="取消">
        </div>
            </tr>
            <!-- <tr>
                <td>美容</td>
                <td class="mui-btn mui-btn-primary">12</td>
                <td><a href="">编辑</a><a href="">删除</a></td>
            </tr>
            <tr>
                <td>护肤</td>
                <td class="mui-btn mui-btn-primary">12</td>
                <td><a href="">编辑</a><a href="">删除</a></td>
            </tr>
            <tr>
                <td>美甲</td>
                <td class="mui-btn mui-btn-primary">12</td>
                <td><a href="">编辑</a><a href="">删除</a></td>
            </tr> -->
        </table>
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'hello',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      data: {},
      isShow:false,
      categroyName:'',
      pid:'',
      isShowUpdata:'',
      categroyNameUpdata:'',
      pidUpdata:'',
      clickId:''
    }
  },
  created() {
      this.getProductList();
  },
  methods: {
      getProductList(){
          var url='http://192.168.1.216/public/index.php/Home/cates/lists';
          this.$http.post(url,{},{ emulateJSON: true }).then(function(res){
              if(res.body.status==1){
                  this.data=res.body.data;
              }
            console.log(res)
          })
      },
      createCategroyShow(){
          this.isShow=!this.isShow;
      },
      createCategroyShow1(a){
            console.log(a);
            this.clickId=a;
          this.isShowUpdata=!this.isShowUpdata;
      },
      cancel(){
          this.isShow=!this.isShow;
      },
      cancel1(){
          this.isShowUpdata=!this.isShowUpdata;
      },
      createCategroy(){
          var url='http://192.168.1.216/public/index.php/Home/cates/addCate';
          this.$http.post(url,{name:this.categroyName,pid:0,sort:this.pid},{emulateJSON:true}).then(function(res){
            console.log(res);
            this.getProductList();
          })
      },
      createCategroy1(index){
          var url='http://192.168.1.216/public/index.php/Home/cates/updateCate';
          this.$http.post(url,{name:this.categroyNameUpdata,pid:0,id:this.clickId},{emulateJSON:true}).then(function(res){
            console.log(res);
            this.getProductList();
          })
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less"scoped>
*{
  padding: 0;
  margin: 0;
}
.prouduct-container{
    position: relative;
    z-index: 10;
    // top: 20px;
    // left: 220px;
    // width: 100%;
    margin-left: 220px;
    margin-right:0px; 
    
    .conta{
        .header{
            height: 80px;
            background-color: white;
            line-height: 80px;
            ul{
                li{
                    list-style: none;
                    float: left;
                    padding: 0 15px;
                }
            }
        }
        background-color: #F3F3F4;
        padding: 20px;
        position: relative;
        .addCategroy{
            padding: 10px;
            border-radius: 10px;
            background: #21c5da;
            position: absolute;
            top: 100px;
            left: 370px;
            z-index: 888;
        }
    .categroy-admin{
        line-height: 80px;
            height: 80px;
            div:nth-of-type(1){
                float: left;
                // flex: 1;
            }
            div:nth-of-type(2){
                float: right;
            }
            overflow: hidden;
            span{
                margin-top: 20px;
                height: 40px;
                line-height: 35px;
                background-color: #21c5da;
                border: none;
                padding: 5px;
                position: relative;
                left: 286px;
                top: 0px;
            }
           
        }
        table{
            tr{
            height: 60px;
            border-bottom: 1px solid #ccc;
            &:hover{
                background-color: pink;
            }
            }
            tr:nth-of-type(1){
                background-color: #F5F9FA;

            }
            
        }
    }
    
}
</style>